import { Link } from '@brillout/docpress'

When doing <Link href="/server-side-rendering">SSR</Link> your page is rendered to HTML. But HTML alone isn't sufficient to make the page interactive.

A page without any client-side JavaScript cannot be interactive: there isn't any JavaScript event handler to react to a user action, such as a click on a button.

In order to make the components of a page interactive, the <Link href="/ui-frameworks">UI framework (Vue/React/...)</Link> loads and renders the page's components also on the client-side.

> The UI framework creates an internal representation of page's component tree, and maps that internal representation to the [DOM tree](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model).

This process is called *hydration*. Informally speaking: it brings the page's interactivity alive.


## See also

- [Vue Docs - Hydration](https://ssr.vuejs.org/guide/hydration.html)
- [React Docs - `hydrate()`](https://reactjs.org/docs/react-dom.html#hydrate)
- <Link href="/hydration-mismatch" />
- <Link href="/server-side-rendering" />
- <Link href="/ui-frameworks" />
- [MDN > DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model)
